<template>
  <f7-page @page:afterin="init">
    <f7-navbar :title="$t('m.mpt1')" back-link=" "></f7-navbar>

    <div class="pay-types-list" v-if="payTypes.length > 0">
      <ul>
        <li v-for="(item, index) in payTypes" :key="index">
          <div class="title">
            <div class="left">
              <img :src="item.type | getType" alt="">
              {{item.type | getName}}
            </div>
            <label>
              <f7-checkbox name="active" :checked="item.status === '1'" :disabled="item.status === '1'" @change="handleChangePayType(item)"></f7-checkbox>
              &nbsp;{{item.status ==='1'?$t('m.mpt2'):$t('m.mpt3')}}
            </label>
          </div>
          <div class="name-box">
            <p>{{item.name || $t('m.mpt4')}}</p>
            <p>{{item.number}}</p>
          </div>
        </li>
      </ul>
      <div class="list-add-button">
        <f7-button fill color="blue" large href="/select-pay-type/">{{$t('m.mpt5')}}</f7-button>
      </div>
    </div>
    <div :class="{'content-padding': payTypes.length === 0}" v-else>
      <div class="no-types">
        <div>
<!--          <p>暂无收款方式</p>-->
          <f7-button fill color="blue" large href="/select-pay-type/">{{$t('m.mpt5')}}</f7-button>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import { getMyPayTypes, changePayType } from "../api/my";
  import i18n from "../i18n";

  export default {
    name: "pay-types",
    data() {
      return {
        payTypes: []
      }
    },
    filters: {
      getType(type) {
        switch (type) {
          case '1':
            return require('../static/bank_card.png')
          case '2':
            return require('../static/alipay.png')
          case '3':
            return require('../static/wechat.png')
        }
      },
      getName(type) {
        return type === '1' ? i18n.t('m.bank'): type==='2'?i18n.t('m.alipay'):i18n.t('m.wechat');
      }
    },
    /*mounted() {
      this.init();
    },*/
    methods: {
      init() {
        getMyPayTypes().then(res => {
          this.payTypes = res.data;
        })
      },
      handleChangePayType(item) {
        changePayType({id: item.id, type: item.type}).then(() => {
          this.init();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    background: #fff url("../static/no-pay-type-bg.jpg") no-repeat center 32%;
    background-size: 100% ;
    height: 100%;
    .no-types {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      > div {
        flex: 1;
        text-align: center;
        p {
          color: $colorGrey;
          padding-bottom: $padding20;
        }
      }
    }
  }
  .list-add-button {
    padding: $padding;
  }
  .pay-types-list {
    ul {
      li {
        background: #fff;
        padding: 0 $padding20;
        margin-top: $padding20;
        .title {
          padding: $padding20 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid $borderColor;
          img {
            width: 50px;
            margin-right: $padding20;
          }
          > * {
            display: flex;
            align-items: center;
          }
        }
        .name-box {
          display: flex;
          padding: 40px 0;
          justify-content: space-between;
        }
      }
    }
  }
</style>
